<template>
<div class="goodsDetails step">
  <div class="step-header">
    <el-steps :active="active" align-center finish-status="success">
      <el-step title="商品信息"></el-step>
      <el-step title="商品图/视频"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品库存"></el-step>
      <el-step title="商品详情"></el-step>
    </el-steps>
  </div>
  <div class="step-content">
    <keep-alive>
      <goods-info
        ref="goods0"
        v-if="active === 0"
        :goods-id="goodsId || productId"
        :disabled="isEdit && isPublished"></goods-info>
      <goods-media
        ref="goods1"
        v-if="active === 1"
        :product-id="goodsId || productId"
        :disabled="isEdit && isPublished"></goods-media>
      <goods-attrs
        ref="goods2"
        v-if="active === 2"
        @reset-sku="refreshSku = true"
        :product-id="goodsId || productId"
        :disabled="isEdit && isPublished"></goods-attrs>
      <goods-s-k-u
        ref="goods3"
        v-if="active === 3"
        @has-reset-sku="refreshSku = false"
        :product-id="goodsId || productId"
        :disabled="isEdit && isPublished"></goods-s-k-u>
      <goods-image-text
        ref="goods4"
        v-if="active === 4"
        :product-id="goodsId || productId"
        :disabled="isEdit && isPublished">
      </goods-image-text>
    </keep-alive>
  </div>
  <div class="step-buttons">
    <template v-if="isEdit">
      <el-button size="mini" v-if="active !== 0" @click="prev">上一步</el-button>
      <template v-if="active !== 4">
        <el-button size="mini" type="primary" v-if="active === 0 && !isPublished" @click="save">保存当前步骤</el-button>
        <el-button size="mini" @click="next(active === 1 || active === 2 || active === 3)">下一步</el-button>
      </template>
      <template v-else>
        <el-button size="mini" type="primary" @click="save" v-if="!isPublished">保存当前步骤</el-button>
        <el-button size="mini" @click="close">关闭</el-button>
      </template>
      <el-button size="mini" type="primary" v-else @click="saveAndClose">完成</el-button>
    </template>
    <template v-else>
      <el-button size="mini" v-if="active !== 0" @click="prev">上一步</el-button>
      <el-button size="mini" type="primary" v-if="active !== 4" @click="saveAndNext">下一步</el-button>
      <el-button size="mini" type="primary" v-else @click="saveAndClose">完成</el-button>
    </template>
  </div>
</div>
</template>

<script>
import goodsInfo from "./goodsInfo";
import goodsMedia from "./goodsMedia";
import goodsAttrs from './goodsAttrs'
import goodsSKU from "./goodsSKU";
import goodsImageText from './goodsImageText'
export default {
  name: "goodsDetails",
  components: { goodsInfo, goodsMedia, goodsAttrs, goodsSKU, goodsImageText },
  props:{
    goodsId: String,
    isPublished: Boolean
  },
  provide(){
    return{
      refreshSku: () => this.refreshSku
    }
  },
  computed:{
    isEdit(){ return !!this.goodsId }
  },
  data(){
    return{
      active: 0,
      productId: '',
      refreshSku: true
    }
  },
  methods:{
    prev(){this.active --},
    async saveAndNext(){
      let info = await this.save();
      if(info === false) return;
      if(this.active === 0){
        this.productId = info.id;
      }
      await this.next();
    },
    async next(forceValid){
      if(forceValid){
        if(await this.save()){
          this.active ++
        }
      }else{
        this.active ++
      }
    },
    async saveAndClose(){
      let info = await this.save();
      if(info === false) return;
      this.close();
      this.$emit('success');
    },
    save(){
      return this.$refs['goods' + this.active].save();
    },
    close(){
      this.$emit('close');
    }
  }
}
</script>

<style scoped lang="less">

</style>